<template lang="">
    <div>
        <el-color-picker show-alpha @active-change="colorChange" />
    </div>
    <div class="out-side-box" :style="styles">
        <!-- <selfInput v-for="item in 6" :key="item" v-model="" /> -->
         <selfInput :value="str" @change="strChange" />
         <!-- <selfInput v-model="str" /> -->
        <el-date-picker-panel v-model="value" value-format="YYYY-MM-DD" />
        <div class="color-style">{{ value }}</div>
    </div>
</template>
<script>
import selfInput from '@/zujian/selfInput.vue';
export default {
    components: {
        selfInput
    },
    data() {
        return {
            str: '你好',
            value: null,
            color: ''
        }
    },
    computed: {
        styles() {
            return {
                '--color-val': this.color
            }
        }
    },
    methods: {
        strChange(str) {
            if (typeof str !== 'string') return
            this.str = str
        },
        colorChange(color) {
            this.color = color
        }
    }
}
</script>
<style lang="scss" scoped>
.color-style{
    color: var(--color-val, red)
}
    
</style>